<template>
  <div class="hospital">
    <!-- 左侧导航区 -->
    <div class="menu">
      <!-- 面包屑导航 -->
      <div class="bread_crumb">
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ path: '/home' }">
            <SvgIcon name="home" width="14px" height="14px" />
            <SvgIcon
              name="line"
              width="14px"
              height="14px"
              style="margin: 0 5px"
            />
            <span class="title">医院信息</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 导航菜单 -->
      <el-menu
        :default-active="activeMenuRouteName"
        text-color="#7f7f7f"
        active-text-color="rgb(116, 200, 233)"
      >
        <el-menu-item
          v-for="item in menuList"
          :index="item.pathName"
          @click="goRoute"
        >
          <el-icon>
            <SvgIcon :name="item.svgName" width="18px" height="18px" />
          </el-icon>
          <span class="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容展示区 -->
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts" name="Hospital">
import useHospitalDetailsStore from '@/store/modules/hospitalDetails'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 获取路由器
const router = useRouter()
// 获取路由对象
const route = useRoute()
// 获取医院详情的仓库
// const hospitalDetailsStore = useHospitalDetailsStore()
// 获取仓库中的医院数据和预约信息 storeToRefs将store中的数据解构为响应式数据
// const { hospitalDetails, bookingRule } = storeToRefs(hospitalDetailsStore)
// 获取仓库中获取数据的方法
const { getHospitalDetails, getHospitalDepartment } = useHospitalDetailsStore()

// 存储菜单列表的信息
const menuList = reactive([
  { name: '预约挂号', pathName: 'register', svgName: 'book' },
  { name: '医院详情', pathName: 'detail', svgName: 'detail' },
  { name: '预约须知', pathName: 'notice', svgName: 'info' },
  { name: '停诊信息', pathName: 'close', svgName: 'close' },
  { name: '查询/取消', pathName: 'search', svgName: 'search' },
])
// 存储当前激活菜单的路由名称(默认为第一项)
let activeMenuRouteName = ref('register')
// 刷新时根据当前路由对象获取当前激活路由的name属性,防止页面刷新后菜单自动选中第一个菜单的问题
activeMenuRouteName.value = route.name as string

// 获取当前医院详情并存储到仓库中(将此请求存放到仓库中了)
/* const getHospitalDetail = async () => {
  // 使用前路由query属性中的医院code获取当前医院详情数据
  const result = await reqHospitalDetail(route.query.hoscode as string)
  if (result.code === 200) {
    // 将医院详情数据存储到仓库中,便于子路由组件的使用
    hospitalDetails.value = result.data.hospital
    bookingRule.value = result.data.bookingRule
  } else {
    ElMessage.error('获取医院详情失败')
  }
} */
// 点击导航菜单的事件回调进行路由跳转Menu-Item的click事件自动注入当前el-menu-item 实例
const goRoute = (vc: any) => {
  // 可以从vc上获取到当前组件的index属性,并携带query参数
  router.push({ name: vc.index, query: { hoscode: route.query.hoscode } })
}

onMounted(() => {
  // 通知仓库根据医院编号发请求获取医院详情数据并存储到仓库中
  getHospitalDetails(route.query.hoscode as string)
  // 通知仓库根据医院编号获取医院科室数据
  getHospitalDepartment(route.query.hoscode as string)
})
</script>

<style scoped lang="scss">
.hospital {
  width: 100%;
  display: flex; // 开启弹性盒
  .menu {
    flex: 2; // 占比总宽度两份
    // 修改menu组件样式
    :deep(.el-menu-item) {
      font-size: 16px;
      .title {
        margin-left: 10px;
      }
    }
    // 面包屑导航样式
    .bread_crumb {
      margin: 10px 23px;
      .title {
        cursor: pointer;
        font-size: 15px;
        color: $base-color;
      }
    }
  }
  .content {
    flex: 10; // 占比总宽度十份
  }
}
</style>
